<template>
    <div class="submitorder" v-if="dedata && proinfodata">
        <search></search>
        <!-- 状态显示栏 -->
        <div class="state">
            <div class="plan">
                <Steps :current="current">
                    <Step title="提交订单"></Step>
                    <Step title="支付"></Step>
                    <Step title="完成订单" style="width : 100px"></Step>
                </Steps>
            </div> 
        </div>
        <!-- 收货地址 -->
        <div class="goodsaddress">
            <div class="bpother">
                <div class="addressshow" v-for="(item,index) in adress_length" :key="index" @click="change_address(index)">
                    <img src="../assets/img/addBorder_H.png" v-if="index == imgactive">
                    <img src="../assets/img/addBorder_N.png" v-else>
                    <div class="addressconent">
                        <p class="p">{{dedata[index].consignee}}</p>
                        <p class="tower">{{dedata[index].provinceName}}{{dedata[index].cityName}}{{dedata[index].countryName}}{{dedata[index].address}}</p>
                        <p class="tower">{{dedata[index].mobile}}</p>
                    </div>
                    <!-- 默认地址 -->
                    <div class="default" v-show="dedata[index].isDefault == 1">默认地址</div>
                    <!-- 编辑 -->
                    <Icon type="compose" class="bj" @click.native.stop="edit_adress(index)"></Icon>
                </div>
            </div>
            <!-- 管理收货地址 -->
            <div class="manage">
                <span class="green" @click="myorder">管理收货地址</span>
                <span @click="addgoodsress">新增收货地址</span>
                <span class="fr" @click="moreaddress('show')" v-show="adress_length < 5">更多地址</span>
                <span class="fr" @click="moreaddress('hide')" v-show="adress_length > 4">隐藏更多地址</span>
            </div>
        </div>
        <h2>确认订单信息</h2>
        <!-- 商品 -->
        <div class="merchandise"  v-for="(items,indexs) in proinfodata.orderConfirmResults" :key="indexs">
            <div class="goodsname">
                <span>店铺：{{items.brandName}}</span>
            </div>
            <!-- 商品详情 -->
            <div class="mer-conter">
                <div class="mer-head">
                    <ul class="distance">
                        <li>商品</li>
                        <li>商品参数</li>
                        <li v-if="!proinfodata.isPartner">单价</li>
                        <li v-if="proinfodata.isPartner">合伙人折扣单价</li>
                        <li>数量</li>
                        <li>小计</li>
                    </ul>
                </div>
                    <div class="mer-body" v-for="(item,index) in items.lstOrderConfirm" :key="index">
                        <ul>
                            <li>
                                <p class="pi">{{item.proName}}</p>
                                <div class="img" :style="`background-image:url(${item.proUrl})`"></div>
                            </li>
                            <li>{{item.proInfo}}mm</li>
                            <li>￥{{item.salesPrice}}</li>
                            <li>{{item.commodityNum}}</li>
                            <li>¥{{item.pAmount}}</li>
                        </ul>
                    </div>
                    <!-- 备注部分 -->
                    <div class="mer-body remark">
                        <div class="remark-content">
                            <span>备注：</span>
                            <input placeholder="字数不超过30字" :class="{'input':true, 'input-lv':bortrue}" @input="buyremake(indexs,items.value)" value="" v-model="items.value" :maxlength=30 @focus="bortrue = true" @blur="bortrue = false">
                            <span class="dphj">店铺合计：</span>
                            <span class="hj-mo">¥ {{items.bAmount}}</span>
                        </div>
                    </div>
                <!-- </div> -->
            </div>         
        </div>
        <!-- 底部合计 -->
        <div class="mer-foot">
            <div class="mer-total">
                <div class="mer-money">
                     <span class="fontbig">¥ {{proinfodata.orderAmount}}</span><p>共<span>{{proinfodata.proCount}}</span>件商品，总计</p>
                </div>
                <button class="close" @click="jsclose">结算</button>
            </div>
        </div>
        <!-- 结算弹窗 -->
        <div class="accoun" v-if="account">
            <div class="accoun-content">
                <div class="accoun-head">
                    <span>合伙人验证</span>
                    <Icon type="android-close" class="acoheadl" @click.native="account = false"></Icon>
                </div>
                <p class="accountphone">手机号</p>
                <div class="accphonenum">15558038093</div>
                <p class="accphone">验证码</p>
                <div class="accverify">
                    <input type="text" placeholder="请输入验证码">
                    <button class="span" :disabled="disabled" @click="getCode">{{countdown}}</button>
                </div>
                <div class="yamjudge">
                    <Icon type="minus-circled" class="yamjj"></Icon>
                    验证码输入错误，请重新输入！
                </div>
                <div class="choosbutton">
                    <div class="qxan" @click="account = false">取消</div>
                    <div class="qdan" @click="validation">确定</div>
                </div>
            </div>
        </div>
        <!-- 30分钟付款提示弹窗 -->
        <div class="thirtyMinute" v-if="thirtyminutes">
            <div class="mask" @click="thirtyminutes = false"></div>
            <div class="main">
                <div class="title">
                    <p>提示</p>
                    <Icon type="close-round" @click.native="thirtyminutes = false"></Icon>
                </div>
                <div class="content-text">
                    <Icon type="ios-information-outline"></Icon>
                    <div class="floatright">
                        <p>请在30分钟内完成付款！</p>  
                        <p class="orange">30分钟后支付通道将被关闭</p>
                    </div>
                </div>
                <div class="btn">
                    <button class="cancel" @click="thirtyminutes = false">取消</button>
                    <button class="determine" @click="thirtyminutes = false">确定</button>
                </div>
            </div>
        </div>
        <!-- 新增地址弹框 -->
        <Adressmodal :visible.sync = 'addadr' @determine="add_success"></Adressmodal>
        <!-- 修改地址弹框 -->
        <Editadress :visible.sync = 'changeadd' :formData="address_data" @determine="edit_success"></Editadress>
    </div>
</template>
<script>
import { Icon, Input, Steps, Step } from "iview";
import Search from "../components/search.vue";
import Modal from "../components/modal";
import Adressmodal from "../components/adressmodal";
import Editadress from "../components/editadress";
import { proConfirmInfo,addressOperation,orderCommit } from "../http/api";
import { getCookie } from "../http/cookie.js"
export default {
    components: {
        Search,
        Input,
        Steps,
        Step,
        Icon,
        Modal, //删除弹框
        Adressmodal, //新增地址弹框
        Editadress //修改地址弹窗
    },
    data() {
        return {
            dedata: null, //地址查询总数据
            imgactive: 0, //地址默认选中
            adress_length: null, //地址渲染长度
            account: false, //结算弹窗
            current: 0,
            time: 0,
            bortrue: false, //备注外边框颜色
            addadr: false, //新增收货地址默认
            changeadd: false, //修改收货地址
            addresswarn:false,//地址超出提示
            address_data: null,
            proinfodata:null, //订单商品列表总数据
            buyremakearr:[],  //买家备注数组
            commitInfo:[] , //传递的数组
            thirtyminutes:false,//30分钟弹框提示
        };
    },
    computed: {
        countdown: function() {
            return this.time > 0 ? `${this.time}s后重新获取` : "获取验证码";
        },
        disabled: function() {
            return this.time > 0 ? true : false;
        }
    },
    methods: {
        edit_adress(index) {
            this.address_data = this.dedata[index];
            this.changeadd = true;
        },
        //订单确认页面
        api_proConfirmInfo(confirmInfo) {
            proConfirmInfo({ confirmInfo: confirmInfo }).then(res => {
                // if(res.data.message == "处理成功"){
                   this.proinfodata = res.data 
                // }
            });
        },
        //收货地址查询
        api_addressOperation() {
            addressOperation({ operationType: "query" }).then(res => {
                this.dedata = res.data.deliveryAddressList;
                if(res.data.deliveryAddressList && res.data.deliveryAddressList.length != 0){           
                    this.deliveryId = this.dedata[0].deliveryId
                    let data_length = res.data.deliveryAddressList.length;
                    if (data_length <= 4) {
                        this.adress_length = data_length;
                    } else {
                        this.adress_length = 4;
                    }
                }         
            });
        }, 
        change_address(index) {
            this.imgactive = index;
            this.deliveryId = this.dedata[index].deliveryId
        },
        moreaddress(state) {
            if (state == "show") {
                this.adress_length = this.dedata.length;
            } else {
                this.adress_length = 4;
            }
        },
        add_success() {
            this.api_addressOperation();
        },
        edit_success() {
            this.api_addressOperation();
        },
        //新增收货地址
        addgoodsress () {
            if(this.dedata.length < 10){
                this.addadr = true
            }else{
               this.$Message.info('已添加10条地址，请先删除原有地址！');
            } 
        },
        //买家备注
         buyremake (i,v) {
            this.buyremakearr[i] = v
        },
        // 底部结算按钮
        jsclose() {  
            if(this.dedata.length == 0){
                this.$Message.info('请您添加收货地址！');
            }else{
                this.proinfodata.orderConfirmResults.map((items,indexs) =>{
                    // 如果没有写备注  传后台是字符串的"undefind"   要变成空字符串    
                    if(this.buyremakearr[indexs] == undefined){
                        this.buyremakearr[indexs] = ""
                    }
                    let orderDetails = []
                    items.lstOrderConfirm.map((item,index) =>{ 
                        orderDetails.push({proCode:item.proCode,commodityNum:item.commodityNum})                           
                    })
                    this.commitInfo.push({"brandId":items.brandId,"buyerRemark":String(this.buyremakearr[indexs]),"orderDetails":orderDetails})
                })
                if (!this.proinfodata.isPartner) {
                    this.account = true;
                } else {
                    orderCommit({"deliveryId":String(this.deliveryId),"commitInfo":JSON.stringify(this.commitInfo),"pageSource":"shopCart"}).then(res=>{
                        if(res.data.status == 1000){
                            let mitdata = res.data 
                            this.$router.push({ path: "/affirminist",query:{oids:mitdata.oids,orderAmount:mitdata.orderAmount,proCount:mitdata.proCount}});        
                        }                 
                    }) 
                    // this.$router.push({ path: "/affirminist",query:{deliveryId:String(this.deliveryId),commitInfo:JSON.stringify(this.commitInfo),url:'submitorder'}});   
                }
            }             
        },
        validation() {
            orderCommit({"deliveryId":String(this.deliveryId),"commitInfo":JSON.stringify(this.commitInfo),"pageSource":"shopCart"}).then(res=>{
                let mitdata = res.data
                this.$router.push({ path: "/affirminist",query:{oids:mitdata.oids,orderAmount:mitdata.orderAmount,proCount:mitdata.proCount}}); 
            }) 
        },
        //获取验证码
        getCode() {
            this.time = 60;
            let timer = null;
            timer = setInterval(() => {
                this.time--;
                if (this.time < 0) {
                    clearInterval(timer);
                }
            }, 1000);
        },
        //管理收货地址跳转个人中心
        myorder() {
            this.$router.push({ path: "/personal/addressmanagement" });
        },

    },
    created() {
        let arraccount = this.$route.query.confirmInfo;
        this.api_addressOperation();
        this.api_proConfirmInfo(arraccount);  
        // 如果tishi是1的话展示30分钟提示窗口，然后改变为2，下次刷新不再出现
        if(this.$route.query.tishi == 1){
            this.thirtyminutes = true
            this.$router.push({query:{confirmInfo:arraccount,tishi:2}})
        } 
    },
};
</script>
<style lang="less">
@import "../assets/styles/submitorder.less";
</style>


